define([
  'jquery',
  'underscore',
  'backbone',
  'lightboxme',
  'dateformatter',
  'models/appointment/AppointmentPopupModel',
  'text!templates/appointments/appointmentPopupTemplate.html'
], function($, _, Backbone,LightBoxMe,Dateformatter, AppointmentPopupModel, appointmentTemplate){

  var AppointmentView = Backbone.View.extend({
    el: $(".modal"),
    events: {'click #appointmentSubmit' : 'submitButton',
        "change #modal_form_appt :input" :"changedSetting"
        } ,
    render: function( event,date,time,doctorId,appointmentId,hospitalId){
		// var appointmentId = $(event.target).attr('appointmentid');
 		
		 var appointmentPopupModel = new AppointmentPopupModel({appointmentdate: date, appointmenttime:time,doctorId:doctorId ,appointmentId:appointmentId
			 , hospitalId:hospitalId});
		 this.model=appointmentPopupModel;
	      var data = {
	    	        appointment: appointmentPopupModel
	    	      };

	      this.loadTemplate(data,doctorId);


    },
    loadTemplate: function(data,doctorId){
	      var compiledTemplate = _.template( appointmentTemplate, data );
	      this.$el.html(compiledTemplate);
        $(".modal").lightbox_me({centered: true, onLoad: function() {
			$("#modal_window").find("input:first").focus();
		}
        });
		  $.ajax({
	  	        type: "GET",
	  	        url: "/doctorsreferralTemplates/"+doctorId,
	  	        success: function(response){
	  	        	$('#selectProblemTemplate').empty();
	  	        	$('#selectProblemTemplate').append($('<option>', { 
  	        	        value: 0,
  	        	        text : ""
  	        	    }));
	  	        	$.each(response, function (i, item) {
	  	        	    $('#selectProblemTemplate').append($('<option>', { 
	  	        	        value: item.id,
	  	        	        text : item.topicName
	  	        	    }));
	  	        	});
	  	          $("#selectProblemTemplate").multiselect({
	  	  	    	noneSelectedText: "Select Problem",
	  	  	    	multiple: false,
	  	  	    	selectedList: 1,
		  	  	    click: function(event, ui){
		  	  	    	console.log(ui);
		  	  	    	$("#linked").show();
		  	  	    	$("#complaint").hide();
		  	  	    	$(".hypered").click(function(evt){
		  	  	    	window.open("/getTemplate/"+$("#selectProblemTemplate").val(),"_blank");
	  	  	    	});
		  	  	   }
	  	  	    	}).multiselectfilter();

	  	        }
	  	    });
    	
    },
    close: function(){
    	
    },
    submitButton: function(){
    	var otherdetailsjson= {
    		    otherdetails: $("#otherdetails").val()
    		};
    	this.model.set(JSON.parse(JSON.stringify( otherdetailsjson)));
    	console.log(this.model);
       	this.model.save(null, {
		    success: function (model, response) {
	      		 $.msgBox({
				    title:"Appment",
				    content:"Successfully Saved!",
				    type:"info",
				    success: function (result) { window.location.hash = "search";}
				});

		    },
		    error: function (model, response) {
	      		 $.msgBox({
					    title:"Appment",
					    content:"The appointment could not be booked!",
					    type:"error",
					    success: function (result) { window.location.hash = "search";}
					});
		    }
		});

    },
    changedSetting:function(evt) {
       var changed = evt.currentTarget;
       var value = $("#"+changed.id).val();
       var obj = "{\""+changed.id +"\":\""+value+"\"}";
       var objInst = JSON.parse(obj);
       this.model.set(objInst);
    },

  });

  return AppointmentView;
});
